<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>信达数据中心运维管理自动化平台</title>
    <meta name="keywords" content="信达数据中心运维管理自动化平台">
    <meta name="description" content="信达数据中心运维管理自动化平台">
    <link rel="shortcut icon" href="../favicon.ico">
    <link href="../../css/bootstrap.min.css?v=3.3.6" rel="stylesheet">
    <link href="../../css/font-awesome.css?v=4.4.0" rel="stylesheet">
    <link href="../../css/animate.css" rel="stylesheet">
    <link href="../../css/style.css?v=4.1.0" rel="stylesheet">
    <link href="../../css/iconfont.css" rel="stylesheet" type="text/css">
    <!-- orgchart.css -->
    <link rel="stylesheet" href="../../js/plugins/orgchart/css/jquery.orgchart.css">
    <!-- Data Tables -->
    <!-- <link href="../../css/plugins/dataTables/dataTables.bootstrap.css" rel="stylesheet"> -->
    <style type="text/css">
    .input-xlarge {
        padding: 5px;
    }

    .control-group option {
        line-height: 30px;

        height: 30px;
        /*margin: 5px auto;*/
    }

    /*自定义表哥*/
    .table {
        width: 400px
    }

    .table table {
        /*边框颜色*/
        margin-top: 20px;
        background: #69F6E6;
        color: #F00;
        border-spacing: 1px;
        border-collapse: separate;
    }

    .table table td {
        background: #FFF;
        text-align: center;
        height: 40px;
        color: #009999;
    }

    .table table tr td:nth-child(1) {
        background-color: #009999;
        color: #fff;
        text-align: center;
    }

    .zonglan .col-sm-2 {
        width: 30%;
        margin-bottom: 14px;
    }

    .panel-body-row .col-sm-4 {
        width: 32%;
        margin-right: 10px;
        border: 1px solid #ddd
    }

    .panel-body-row .col-sm-4:last-child {
        margin: 0;
    }

    .panel-body-row .col-sm-4 .row {
        margin-bottom: 8px;
    }

    .modal-lg {
        width: 85%
    }

    /* orgcharts */

    /* 鼠标移动时的效果 */
    .orgchart .node:hover {
        background-color: #ffffff;
        transition: .5s;
        cursor: default;
        z-index: 20;
    }

    /* 鼠标点击时的效果 */
    .orgchart .node.focused {
        background-color: #ffffff;
    }

    /* 去掉手型 */
    .orgchart .node .horizontalEdge {
        width: 0px;
        height: calc(100% - 10px);
        height: -webkit-calc(100% - 10px);
        height: -moz-calc(100% - 10px);
        top: 0px;
    }

    /* 圆角 */
    .orgchart .node .title {
        border-radius: 4px 4px 4px 4px;
    }

    /* 去掉上下左右的扩大缩小箭头 */
    group:before,
    .fa-users:before {
        content: none;
    }

    .fa-chevron-up::before {
        content: none;
    }

    .fa-chevron-down::before {
        content: none;
    }

    .fa-chevron-right::before {
        content: none;
    }

    .fa-chevron-left::before {
        content: none;
    }

    .cursor {
        cursor: pointer;
        margin-top: 20px;
    }
    </style>
</head>

<body class="gray-bg">
    <div class="wrapper wrapper-content animated fadeInRight">
        <div class="row">
            <div class="col-sm-12">
                <div class="ibox">
                    <div class="ibox-title">
                        <h5>计算资源概览</h5>
                    </div>
                    <div class="ibox-content">
                        <div class="row">
                            <div class="col-sm-6 mt30">
                                <div class="col-sm-6 cursor">
                                    <div class="table">
                                        <table width="100%" border="0" cellspacing="1" cellpadding="0">
                                            <tr>
                                                <td>X86虚拟宿主机</td>
                                                <td>100台</td>
                                            </tr>
                                            <tr>
                                                <td>X86虚拟机</td>
                                                <td>20台</td>
                                            </tr>
                                            <tr>
                                                <td>单台物理机</td>
                                                <td>600台</td>
                                            </tr>
                                            <tr>
                                                <td>小型机物理机</td>
                                                <td>70台</td>
                                            </tr>
                                            <tr>
                                                <td>小型机虚拟机</td>
                                                <td>500台</td>
                                            </tr>
                                        </table>
                                    </div>
                                </div>
                                <div class="col-sm-6 bdr" >
                                    <div class="echarts" id="echarts-pie" style="height:300px;"></div>
                                </div>
                            </div>
                            <div class="col-sm-6">
                                <div class="row zonglan">
                                    <div class="col-sm-2 fs16" style="color:#009999">总览</div>
                                    <div class="col-sm-2"><span class="iconfont icon-cpu2"></span>CPU总数
                                        <strong>315</strong>台</div>
                                    <div class="col-sm-2"><span class="iconfont icon-cpu2"></span>CPU剩余数
                                        <strong>315</strong>台</div>
                                    <div class="col-sm-2"><span class="iconfont icon-cpu2"></span>内存总量
                                        <strong>315</strong>台</div>
                                    <div class="col-sm-2"><span class="iconfont icon-cpu2"></span>内存剩余量
                                        <strong>315</strong>台</div>
                                    <div class="col-sm-2"><span class="iconfont icon-cpu2"></span>存储总量
                                        <strong>315</strong>台</div>
                                    <div class="col-sm-2"><span class="iconfont icon-cpu2"></span>存储剩余量
                                        <strong>315</strong>台</div>
                                    <div class="col-sm-2"><span class="iconfont icon-cpu2"></span>X86虚拟化比
                                        <strong>315</strong>台</div>
                                </div>
                            </div>
                            <div class="col-sm-6 mt20">
                                <div class="tabs-container">
                                    <ul class="nav nav-tabs">
                                        <li class="active"><a data-toggle="tab" href="#tab-1" aria-expanded="true">
                                                X86虚拟化</a>
                                        </li>
                                        <li class=""><a data-toggle="tab" href="#tab-2" aria-expanded="false">小型机虚拟化</a>
                                        </li>
                                        <li class=""><a data-toggle="tab" href="#tab-3" aria-expanded="false">物理机</a>
                                        </li>
                                    </ul>
                                    <div class="tab-content">
                                        <div id="tab-1" class="tab-pane active">
                                            <div class="panel-body">
                                                <div class="row panel-body-row">
                                                    <div class="col-sm-4" style="border: 1px solid #ddd">
                                                        <div class="row pl5" style="background-color: #009999;color:#fff;padding:5px">
                                                            VMware
                                                        </div>
                                                        <div class="row pl5">
                                                            NSX环境——集群M031E001
                                                        </div>
                                                        <div class="row">
                                                            <div class="col-sm-6 iconfont icon-cpu2 pl5" style="font-size: 12px">总CPU</div>
                                                            <div class="col-sm-6">1000核 </div>
                                                        </div>
                                                        <div class="row">
                                                            <div class="col-sm-6 iconfont icon-cpu2 pl5" style="font-size: 12px">总内存</div>
                                                            <div class="col-sm-6">500G </div>
                                                        </div>
                                                        <div class="row">
                                                            <div class="col-sm-6 iconfont icon-cpu2 pl5" style="font-size: 12px">CPU使用率</div>
                                                            <div class="col-sm-6">55%</div>
                                                        </div>
                                                        <div class="row">
                                                            <div class="col-sm-6 iconfont icon-cpu2 pl5" style="font-size: 12px">内存使用率</div>
                                                            <div class="col-sm-6">40% </div>
                                                        </div>
                                                    </div>
                                                    <div class="col-sm-4">
                                                        <div class="row pl5" style="background-color: #009999;color:#fff;padding:5px">
                                                            VMware
                                                        </div>
                                                        <div class="row pl5">
                                                            开发测试环境——M031C161
                                                        </div>
                                                        <div class="row">
                                                            <div class="col-sm-6 iconfont icon-cpu2 pl5" style="font-size: 12px">总CPU</div>
                                                            <div class="col-sm-6">1000核 </div>
                                                        </div>
                                                        <div class="row">
                                                            <div class="col-sm-6 iconfont icon-cpu2 pl5" style="font-size: 12px">总内存</div>
                                                            <div class="col-sm-6">500G </div>
                                                        </div>
                                                        <div class="row">
                                                            <div class="col-sm-6 iconfont icon-cpu2 pl5" style="font-size: 12px">CPU使用率</div>
                                                            <div class="col-sm-6">55%</div>
                                                        </div>
                                                        <div class="row">
                                                            <div class="col-sm-6 iconfont icon-cpu2 pl5" style="font-size: 12px">内存使用率</div>
                                                            <div class="col-sm-6">40% </div>
                                                        </div>
                                                    </div>
                                                    <div class="col-sm-4">
                                                        <div class="row pl5" style="background-color: #009999;color:#fff;padding:5px">
                                                            VMware
                                                        </div>
                                                        <div class="row pl5">
                                                            开发测试环境——M031C162
                                                        </div>
                                                        <div class="row">
                                                            <div class="col-sm-6 iconfont icon-cpu2 pl5" style="font-size: 12px">总CPU</div>
                                                            <div class="col-sm-6">1000核 </div>
                                                        </div>
                                                        <div class="row">
                                                            <div class="col-sm-6 iconfont icon-cpu2 pl5" style="font-size: 12px">总内存</div>
                                                            <div class="col-sm-6">500G </div>
                                                        </div>
                                                        <div class="row">
                                                            <div class="col-sm-6 iconfont icon-cpu2 pl5" style="font-size: 12px">CPU使用率</div>
                                                            <div class="col-sm-6">55%</div>
                                                        </div>
                                                        <div class="row">
                                                            <div class="col-sm-6 iconfont icon-cpu2 pl5" style="font-size: 12px">内存使用率</div>
                                                            <div class="col-sm-6">40% </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <div id="tab-2" class="tab-pane">
                                            <div class="panel-body">
                                                <div class="row" style="padding:0 50px;">
                                                    <div class="col-sm-2">
                                                        <div>
                                                            13
                                                        </div>
                                                        <p>地域</p>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-sm-12">
                <div class="ibox">
                    <div class="ibox-title">
                        <h5>平台拓扑图</h5>
                    </div>
                    <div class="ibox-content" style="position: relative; height: 600px; overflow: auto;">
                        <div id="chart-container"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- 模态框-->
    <div class="modal inmodal fade" id="change" tabindex="-1" role="dialog" aria-hidden="true">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
                    <h4 class="modal-title">单台物理机</h4>
                </div>
                <div class="modal-body" style="text-align: center">
                    <div id="tab-tabale1" class="tab-pane active">
                        <div class="panel-body">
                            <table class="table table-striped table-bordered table-hover dataTablesModal">
                                <thead>
                                    <tr>
                                        <th>主机名</th>
                                        <th>IP地址</th>
                                        <th>品牌</th>
                                        <th>CPU总核数</th>
                                        <th>内存总数</th>
                                        <th>CPU型号</th>
                                        <th>维保信息</th>
                                        <th>管理员</th>
                                        <th>业务信息</th>
                                        <th>CPU利用率</th>
                                        <th>内存利用率</th>
                                    </tr>
                                </thead>
                                <tfoot>
                                    <tr>
                                        <th>主机名</th>
                                        <th>IP地址</th>
                                        <th>品牌</th>
                                        <th>CPU总核数</th>
                                        <th>内存总数</th>
                                        <th>CPU型号</th>
                                        <th>维保信息</th>
                                        <th>管理员</th>
                                        <th>业务信息</th>
                                        <th>CPU利用率</th>
                                        <th>内存利用率</th>
                                    </tr>
                                </tfoot>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- 基础js -->
    <script src="../../js/jquery.min.js?v=2.1.4"></script>
    <script src="../../js/bootstrap.min.js?v=3.3.6"></script>
    <script src="../../js/content.js?v=1.0.0"></script>
    <!-- 插件js -->
    <script src="../../js/plugins/echarts/echarts-all.js"></script>
    <!-- Data Tables -->
    <script src="../../js/plugins/dataTables/jquery.dataTables.js"></script>
    <script src="../../js/plugins/dataTables/dataTables.bootstrap.js"></script>
    <!-- orgchart.js -->
    <script src="../../js/plugins/orgchart/js/jquery.orgchart.js"></script>
    <script type="text/javascript">
    $(function() {



        // 查看资源概览
        $(".table").click(function() {
            $('#change').modal("show");
        });



        // 表格
        $('.dataTablesModal').DataTable({
            " dom": "Bfrtip",
            // " dom": "Bfrtip",
            bLengthChange: false, //去掉每页显示多少条数据方法
            bFilter: false, //去掉搜索框方法三：这种方法可以,
            "ajax": '../../data/dt.json',
            "columns": [
                { "data": "id1" },
                { "data": "id2" },
                { "data": "id3" },
                { "data": "id4" },
                { "data": "id5" },
                { "data": "id6" },
                { "data": "id7" },
                { "data": "id8" },
                { "data": "id9" },
                { "data": "id10" },
                { "data": "id11" },
            ]
        });





        // 饼状图
        var pieChart = echarts.init(document.getElementById("echarts-pie"));

        var pieoption = {
            title: {
                text: '计算资源分布比例',
                textStyle: {
                    fontSize: 14,
                    // x: 'center'
                }

            },
            tooltip: {
                trigger: 'item',
                formatter: "{a} <br/>{b} : {c} ({d}%)"
            },
            legend: {
                orient: 'horizontal', // 'vertical'
                x: 'left', // 'center' | 'left' | {number},
                // y: 'bottom', // 'center' | 'bottom' | {number}
                // left: 0,
                top: '15%',
                data: ['X86虚拟宿主机', 'X86虚拟机', '单台物理机', '小型宿主机', '小型虚拟机']
            },

            grid: {
                // top:"90%",
                // left: '25%', //距离左边距
                // right: '25%', //距离右边距
                // bottom: '0%', //距离下边距
            },
            series: [{
                name: '访问来源',
                type: 'pie',
                radius: '55%',
                center: ['50%', '60%'],
                data: [
                    { value: 335, name: 'X86虚拟宿主机' },
                    { value: 310, name: 'X86虚拟机' },
                    { value: 234, name: 'X86虚拟机' },
                    { value: 135, name: '小型宿主机' },
                    { value: 1548, name: '小型虚拟机' }
                ],
                itemStyle: {
                    emphasis: {
                        shadowBlur: 10,
                        shadowOffsetX: 0,
                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                    }
                }
            }]
        };

        pieChart.setOption(pieoption);
        $(window).resize(pieChart.resize);

        // 拓扑图
        var data = {
            'name': 'X86虚拟化',
            'relationship': { 'children_num': 3 },
            'children': [{
                    'name': '北京数据中心',
                    // 'title': '数据中心',
                    'children': [{
                            'name': '集群1',
                            'children': [{
                                    'name': '宿主机1'
                                },
                                {
                                    'name': '宿主机2'
                                },
                                {
                                    'name': '宿主机3'
                                },
                                {
                                    'name': '宿主机4'
                                }
                            ]
                        },
                        {
                            'name': '集群2',
                            'children': [{
                                    'name': '宿主机1',
                                    'children': [{
                                            'name': 'vm1'
                                        },
                                        {
                                            'name': 'vm2'
                                        },
                                    ]
                                },
                                {
                                    'name': '宿主机2',
                                    'children': [{
                                        'name': 'vm1'
                                    }]
                                },
                                {
                                    'name': '宿主机3',
                                    'children': [{
                                        'name': 'vm1',
                                        'children': [{
                                            'name': 'vm2',
                                            'children': [{
                                                'name': 'vm3'
                                            }]
                                        }]
                                    }]
                                }
                            ]
                        },
                        {
                            'name': '集群3',
                            'children': [{
                                    'name': '宿主机1',
                                    'children': [{
                                        'name': 'vm1',
                                        'children': [{
                                            'name': 'vm2'
                                        }]
                                    }]
                                },
                                {
                                    'name': '宿主机2',
                                    'children': [{
                                        'name': 'vm1'
                                    }]
                                }
                            ]
                        }
                    ]
                },
                {
                    'name': '安徽数据中心',
                    // 'title': '数据中心',
                    'children': [{
                            'name': '集群1',
                            'children': [{
                                    'name': '宿主机1'
                                },
                                {
                                    'name': '宿主机2'
                                },
                                {
                                    'name': '宿主机3'
                                },
                                {
                                    'name': '宿主机4'
                                }
                            ]
                        },
                        {
                            'name': '集群2',
                            'children': [{
                                    'name': '宿主机1',
                                    'children': [{
                                            'name': 'vm1'
                                        },
                                        {
                                            'name': 'vm2'
                                        },
                                    ]
                                },
                                {
                                    'name': '宿主机2',
                                    'children': [{
                                        'name': 'vm1'
                                    }]
                                },
                                {
                                    'name': '宿主机3',
                                    'children': [{
                                        'name': 'vm1',
                                        'children': [{
                                            'name': 'vm2',
                                            'children': [{
                                                'name': 'vm3'
                                            }]
                                        }]
                                    }]
                                }
                            ]
                        },
                        {
                            'name': '集群3',
                            'children': [{
                                    'name': '宿主机1',
                                    'children': [{
                                        'name': 'vm1',
                                        'children': [{
                                            'name': 'vm2'
                                        }]
                                    }]
                                },
                                {
                                    'name': '宿主机2',
                                    'children': [{
                                        'name': 'vm1'
                                    }]
                                }
                            ]
                        }
                    ]
                }
            ]
        }

        $('#chart-container').orgchart({
            'data': data, // 数据
            'visibleLevel': 999, // 默认展开几级
            'zoom': false, // 通过鼠标滚轮放大或缩放OrgChart，默认false
            'pan': true, // 鼠标拖动OrgChart，默认false
            'direction': 'l2r', // 方向，默认t2b，T2B："从上到下"，B2T："从底到上"，L2R："左到右"，R2L："向左到右"
            'nodeTitle': 'name', // 将数据源的一个属性设置为OrgChart节点标题段的文本内容
            // 'nodeContent': 'title',      // 将数据源的一个属性设置为OrgChart节点的内容部分的文本内容
        });

        $('#chart-container').find('.node').on('click', function() {
            // alert(JSON.stringify($(this).data('nodeData')));
        });


    })
    </script>
</body>

</html>